<template>
<div>
 <nav class="mui-bar mui-bar-tab footer ">
    <router-link class="mui-tab-item " :class="{muiActive:'index'==pageName}"  :to='{name:"Index"}' >
    <span class="mui-icon"><i class="index-icon " :class="{active:'index'==pageName}"></i></span>
    <span class="mui-tab-label" :class="{a_red:'index'==pageName}">海选</span>
    </router-link>
     <router-link class="mui-tab-item" :class="{muiActive:'nearby'==pageName}" :to="{name:'Nearby'}" ><!---->
     <span class="mui-icon"><i class="add-icons" :class="{active:'nearby'==pageName}"></i></span>
     <span class="mui-tab-label" :class="{a_red:'nearby'==pageName}">本地</span>
    </router-link>
    <router-link class="mui-tab-item" :class="{muiActive:'personhudong'==pageName}" :to="{name:'Interaction_personal'}" >
    <span class="mui-icon"><i class="chat-icon" :class="{active:'personhudong'==pageName}"></i></span>
    <span class="mui-tab-label" :class="{a_red:'personhudong'==pageName}">社群</span>
    </router-link>
    <router-link class="mui-tab-item" :class="{muiActive:'collect'==pageName}" :to="{name:'Collection'}"  >
    <span class="mui-icon"><i class="collection-icon" :class="{active:'collect'==pageName}"></i></span>
    <span class="mui-tab-label"  :class="{a_red:'collect'==pageName}">收藏</span>
    </router-link>
    <router-link class="mui-tab-item" :class="{muiActive:'personalmine'==pageName}" :to="{name:'Mine'}" data-ajax="falss" >
    <span class="mui-icon"><i class="mine-icon" :class="{active:'personalmine'==pageName}"></i></span>
    <span class="mui-tab-label" :class="{a_red:'personalmine'==pageName}">我的</span>
    </router-link>
 </nav>
 </div>
</template>
<style scoped>
 .a_red{
     color: red!important;
 }
</style>
<script>
export default {
     props: {
    pageName: String
  },
	data () {
		return {
		}
  }
}
</script>
